<template>
  <div class="content">
    <div class="fillInCont">
      <input
        v-model="form.orderNum"
        :value="form.orderNum"
        title="订单号"
        placeholder="输入订单号"
        maxlength="9999"
        @change="orderNumChange"
        class="inputB"
      />
      <input
        v-model="form.verificationNum"
        :value="form.verificationNum"
        title="核销码"
        placeholder="请输入核销码"
        maxlength="9999"
        @change="verificationNumChange"
        class="inputB2"
      />
    </div>
    <div class="verificationBtn">
      <button
        class="handleClick"
        @click="handleClick"
        type="primary"
        shape="circle"
        size="small"
      >验证</button>
    </div>
  </div>
</template>


<script>
import { COMPLETE_ORDER } from '@/api'

export default {
  components: {},

  data () {
    return {
      form: {
        orderNum: '',
        verificationNum: ''
      }
    }
  },
  created () {},
  onShow () {
    this.init()
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  methods: {
    orderNumChange (e) {
      const vm = this
      vm.form.orderNum = e.mp.detail.value
    }, // 输入订单号
    verificationNumChange (e) {
      const vm = this
      vm.form.verificationNum = e.mp.detail.value
    }, // 请输入核销码
    handleClick () {
      const vm = this
      if (!vm.form.orderNum) {
        vm.smallHintFrame('订单号为空，请填写~~~')
        return false
      } else if (!vm.form.verificationNum) {
        vm.smallHintFrame('核销码为空，请填写~~~')
        return false
      }
      this._completeOrder()
    }, // 确认按钮
    _completeOrder () {
      const vm = this
      COMPLETE_ORDER(
        vm.account.shopId,
        vm.form.orderNum,
        vm.form.verificationNum
      )
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('手动核销成功', '').then(() => {
              vm.form.orderNum = ''
              vm.form.verificationNum = ''
              // vm.$router.replace(
              //   '/pages/shop-management/my-verification-manual/main'
              // )
            })
          } else {
            vm.smallHintFrame(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 核销请求
    init () {
      this.form.orderNum = ''
      this.form.verificationNum = ''
    }, // 初始化
    smallHintFrame (value) {
      wx.showToast({
        title: value,
        icon: 'none',
        duration: 2000
      })
    } // 小提示框
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 360px;
  margin: auto;
  .fillInCont {
    margin: auto;
    height: auto;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .inputB {
      padding-top: 10px;
      background-color: transparent;
      font-size: 14px;
      color: #000;
      margin-left: 20px;
      height: 40px;
    }
    .inputB2 {
      // border: 1px solid #bbbbbb;
      // border-radius: 4px;
      padding-bottom: 10px;
      background-color: transparent;
      font-size: 14px;
      color: #000;
      margin-left: 20px;
      height: 40px;
    }
  }
  .verificationBtn {
    margin-top: 150px;
    .handleClick {
      border-radius: 25px;
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border-radius: 2px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      color: #fff !important;
      margin: 10px;
      background: #508ff9;
    }
  }
}
</style>
